<script setup>
import axios from "axios";
import config from '@/utils/GlobalConfig'

import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
import {onMounted, ref} from "vue";

const map = config.map

// 经纬度显示
let curPosition=ref({
  lat:'',
  lon:''
})

function BindEvent(){
  map.on('mousemove',(e)=>{
    let lat=e.latlng.lat.toFixed(3)
    let lon=e.latlng.lng
    lon = lon % 360
    if(lon < 0){
      lon+=360
    }
    lon=lon.toFixed(3)
    curPosition.value.lon= (lon < 180? "东经" + lon:"西经"+(360-lon).toFixed(3))+"°"
    curPosition.value.lat= (lat > 0? "北纬" + lat :"南纬"+ -lat) +"°"
  })

  // 测量
}

// 地图缩放
function zoomIn() {
  map.zoomIn();
}

function zoomOut() {
  map.zoomOut();
}

import '@/assets/js/measure/Leaflet.LinearMeasurement'
import '@/assets/js/measure/Leaflet.LinearMeasurement.css'
import measureImage from  '@/assets/image/UI/measure.png'
import measureActiveImage from '@/assets/image/UI/measure-active.png'
// 测距
let isMeasureLen=ref(false)
function measureLength() {
  isMeasureLen.value = !isMeasureLen.value
  // eslint-disable-next-line no-undef
  DistanceMeasure()
}

// 驴肉火烧店铺图层
import shopMarker from "@/assets/image/shop.png"
const shopLayer = L.layerGroup()
let showShopInfo = ref(false)
let showEvaluation = ref(false)

const curShopInfo = ref({
  photos:[]
})
function drawLRHSLayer() {
  let shopIcon = L.icon({
    iconUrl: shopMarker,
    iconSize:     [28, 28], // icon的大小
    iconAnchor:   [14, 14], // icon的渲染的位置（相对与marker）
  });
  axios.get(config.webService+'shop').then(res => {
    if(res.data.code === 1){
      let data = res.data.data
      for(let i = 0; i < data.length; i++){
        const shop= L.marker([data[i].lat,data[i].lon],{
          icon:shopIcon
        }).addTo(shopLayer)
        shop.on('click',()=>{
          showShopInfo.value= true
          showEvaluation.value =false
          if(typeof data[i].photos == 'string'){
            data[i].photos=data[i].photos.split(',')
          }
          data[i].evaluate = '/data/evaluation/'+data[i].id+'.jpg'
          curShopInfo.value = data[i]
        })
      }
    }

  }).catch(()=>{

  })
  shopLayer.addTo(map)

}

//店铺定位
function shopLocate(lonlat){
  map.setView(lonlat,14)
}

//图层管理
let showLayerCheckbox=ref(false)
let layerCheckbox=ref(['北京行政区划', '高校'])

function layerChange(e){
  if(e.includes('北京行政区划')){
    drawBeiJingLayer()
  }else{
    removeLayer('beijing')
  }
  if(e.includes('道路')){
    drawRoadLayer()
  }else{
    removeLayer('road')
  }
  if(e.includes('高校')){
    drawPOILayer('school')
  }else{
    removeLayer('school')
  }
  if(e.includes('商场')){
    drawPOILayer('mall')
  }else{
    removeLayer('mall')
  }
  if(e.includes('火车站')){
    drawPOILayer('station')
  }else{
    removeLayer('station')
  }
}


// 展示北京行政区划
const beijingLayer = L.layerGroup()
let showBeijingLayer =false
function drawBeiJingLayer() {
  if(showBeijingLayer){
    return
  }
  axios.get('data/beijing.json').then(res => {
    L.geoJSON(res.data, {
      color: '#e568ff',
      fillOpacity: 0.1,
      weight: 2
    }).addTo(beijingLayer)
    showBeijingLayer = true
  })
  beijingLayer.addTo(map)
}
function removeLayer(type) {
  if(type === 'beijing'){
    beijingLayer.clearLayers()
    showBeijingLayer=false
  }else if(type === 'road'){
    roadLayer.clearLayers()
    showRoadLayer = false
  }else if(type === 'school'){
    schoolLayer.clearLayers()
    showSchoolLayer = false
  }else if(type === 'mall'){
    mallLayer.clearLayers()
    showMallLayer = false
  }else if(type === 'station'){
    stationLayer.clearLayers()
    showStationLayer = false
  }
}

// 展示道路
const roadLayer = L.layerGroup()
let showRoadLayer =false
function drawRoadLayer() {
  if(showRoadLayer){
    return
  }
  axios.get('data/road.json').then(res => {
    L.geoJSON(res.data, {
      color: '#a100ff',
      weight: 4
    }).addTo(roadLayer)
    showRoadLayer = true
  })
  roadLayer.addTo(map)

}

const schoolLayer = L.layerGroup()
const mallLayer = L.layerGroup()
const stationLayer = L.layerGroup()
let showSchoolLayer =false
let showMallLayer =false
let showStationLayer =false


function drawPOILayer(type) {
  if(type === 'school' && showSchoolLayer===true){
    return
  }
  if(type === 'mall' && showMallLayer===true){
    return
  }
  if(type === 'station' && showStationLayer===true){
    return
  }
  axios.get(config.webService+'poi').then(res => {
    console.log(res.data)
    if(res.data.code === 1){
      let data = res.data.data
      let layer= schoolLayer
      switch (type){
        case 'school':
          showSchoolLayer = true;
          layer= schoolLayer
          break
        case 'mall':
          showMallLayer = true;
          layer= mallLayer
          break
        case 'station':
          showStationLayer = true;
          layer= stationLayer
          break
      }
      for(let i=0;i<data.length;i++){
        if(type===data[i].ctype){
          let imageUrl ='data/'+ type + '.png'
          L.marker([data[i].lat,data[i].lon],{
            icon:L.divIcon({
              html:
                  `<div style="width: 170px;font-size: 14px;text-shadow: 0 0 3px white;margin-left: -85px;margin-top:-20px;text-align: center;">`+data[i].name+`</div>
          <div ><img style="width: 24px;margin-left: -12px " src=`+imageUrl+` alt="school"></div>`,
              className: '',
            })
          }).addTo(layer)

        }

      }

    }

  }).catch(e=>{
    console.log(e)
  })
  schoolLayer.addTo(map)
  mallLayer.addTo(map)
  stationLayer.addTo(map)
}

onMounted(()=>{
  BindEvent()
  drawBeiJingLayer()
  drawPOILayer('school')
  drawLRHSLayer()
})
</script>

<template>
  <div class="map-function-container">
    <el-row>
      <el-col :span="7">
        <div class="function-text" @click="zoomIn">
          <img src="../assets/image/UI/zoom-in.png" alt="zoom-in" class="map-function-icon">
          放大
        </div>
      </el-col>
      <el-divider direction="vertical" border-style="dashed" style="height: 26px;border-width: 2px;margin-top: 2px;"/>
      <el-col :span="6">
        <div class="function-text" @click="zoomOut">
          <img src="../assets/image/UI/zoom-out.png" alt="zoom-out" class="map-function-icon" style="width:21px;">
          缩小
        </div>
      </el-col>
      <el-divider direction="vertical" border-style="dashed" style="height: 26px;border-width: 2px;margin-top: 2px;"/>
      <el-col :span="7">
        <div :class="isMeasureLen?'function-text-active':'function-text'" @click="measureLength">
          <img :src="isMeasureLen?measureActiveImage:measureImage" alt="measure" class="map-function-icon" style="width:21px;">
          测量
        </div>
      </el-col>
    </el-row>
  </div>

  <div class="lonlat">
    {{curPosition.lon +"，"+ curPosition.lat}}
  </div>

<!--  店铺信息-->
  <div class="shopInfo" v-show="showShopInfo">
    <div style="text-align: right">
      <img src="@/assets/image/UI/close.png" style="width: 24px;padding-right: 6px;cursor: pointer;" alt="" @click="showShopInfo=false">
    </div>

    <el-carousel :interval="3000" :autoplay="false" style="height: 200px">
      <el-carousel-item v-for="(item, index) in curShopInfo.photos" :key="index">
        <img :src="item" alt="img" style="width: 100%;">
      </el-carousel-item>
    </el-carousel>

    <div class="shopInfo-title" v-text="curShopInfo.name"></div>

    <div style="padding-left: 3px;font-size: 14px;margin-top: 5px">
      <el-row style="font-size: 14px;">
        <el-col :span="14">
          <el-rate
              v-model="curShopInfo.rating"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
          />
        </el-col>

        <el-col :span="10" style="line-height: 32px;text-align: right;cursor: pointer" @click="showEvaluation=true">
          {{curShopInfo.evaluation}}人评
          <img src="@/assets/image/UI/toright.png" style="vertical-align: middle;width: 22px;" alt="">
        </el-col>
      </el-row>

    </div>
    
    <el-divider style="margin: 12px 0 12px 6px;width: calc(100% - 10px);" />
    
    <div style="padding-left: 6px;font-size: 14px;margin-top: 10px">
      <el-row>
        <el-col :span="12">营业时间
          <el-divider direction="vertical" style="height: 26px;float: right"/>
        </el-col>
        <el-col :span="12">人均价格</el-col>
      </el-row>

      <el-row style="margin-top: -2px">
        <el-col :span="12" style="color: #00cb80">
          {{curShopInfo.openTime}}
          <el-divider direction="vertical" style="float: right" />
        </el-col>
        <el-col :span="12">￥{{curShopInfo.cost}}/人</el-col>
      </el-row>
    </div>
    <div style="padding-left: 6px;font-size: 14px;margin-top: 10px">
      商家电话：{{curShopInfo.tel}}
    </div>
    <div style="padding-left: 6px;font-size: 14px;margin-top: 10px;">
      类型：{{curShopInfo.type}}
    </div>

    <el-divider style="margin: 12px 0 12px 6px;width: calc(100% - 10px);" />

    <div style="padding-left: 6px;font-size: 14px;margin-top: 10px;">
      <el-row>
        <el-col :span="22">
          <span style="font-weight: 700">位于{{curShopInfo.address}}</span> 北京市{{curShopInfo.area}}

        </el-col>
        <el-col :span="2" >
          <img src="@/assets/image/UI/locate.png" alt="" style="width: 20px;vertical-align: middle;cursor: pointer" @click="shopLocate([curShopInfo.lat,curShopInfo.lon])">
        </el-col>
      </el-row>
    </div>

    <div style="position:absolute;top: 0;background: white" v-show="showEvaluation">
      <img src="@/assets/image/UI/toback.png" style="width: 26px;padding-right: 6px;cursor: pointer;" alt="" @click="showEvaluation=false">
      <div style="height: 495px;overflow: auto">
        <img :src="curShopInfo.evaluate" style="width: 100%" alt="">

      </div>
    </div>
  </div>

<!--  图层管理btn-->
  <div class="fun-btn" @click="showLayerCheckbox=!showLayerCheckbox" >
    图层管理
  </div>

  <div class="layer-control" v-show="showLayerCheckbox">
    <el-checkbox-group v-model="layerCheckbox" @change="layerChange">
      <el-checkbox checked disabled label="驴肉火烧店铺" />
      <el-checkbox label="北京行政区划" />
      <el-checkbox label="高校" />
      <el-checkbox label="商场" />
      <el-checkbox label="火车站" />
      <el-checkbox label="道路" />
    </el-checkbox-group>
  </div>
</template>

<style scoped>

.lonlat {
  position: absolute;
  z-index: 2;
  right: 5px;
  font-size: 16px;
  bottom: 5px;
  text-shadow: 0 0 5px #fff;
  font-weight: 700;
}

.map-function-container {
  width: 300px;
  height: 32px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 #0000004d;
  line-height: 32px;
  position: absolute;
  z-index: 2;
  top: 5vw;
  right: 1%;
}
.function-text{
  text-align: center;
  cursor: pointer;
}
.function-text-active{
  text-align: center;
  cursor: pointer;
  color:#249ce8;
}
.map-function-icon {
  vertical-align: middle;
  width: 24px;
  margin: 0 2px;
}

.shopInfo{
  position: absolute;
  right: 5px;
  height: 525px;
  width: 300px;
  background: white;
  z-index: 9;
  top: 20%;
  border: 2px solid #ffbc00;
}

.shopInfo-title{
  font-size: 17px;
  color: black;
  font-weight: 700;
  padding: 6px;
}

.fun-btn{
  position: absolute;
  top: 5vw;
  left: 330px;
  z-index: 999;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2px;
  background: #ffbc00c9;
  padding: 5px 8px;
  border-radius: 6px;
  box-shadow: inset 0 0 5px 2px #ff5e00;
  cursor: pointer;
}

.layer-control{
  position: absolute;
  z-index: 99;
  top: 5vw;
  right: 350px;
  width: 140px;
  background: #ffffff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ff6a00;
}
</style>